<nav class="navbar navbar-default" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" ng-click="vm.toggleNavbar()">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#/" ng-click="vm.collapseNavbar()"><span>Travel</span> <span class="navbar-version">v{{VERSION}}</span></a>
        </div>
        <div class="navbar-collapse" uib-collapse="vm.isNavbarCollapsed" ng-switch="vm.isAuthenticated()">
            <ul class="nav navbar-nav navbar-right">
                <li ui-sref-active="active">
                    <a ui-sref="home" ng-click="vm.collapseNavbar()">
                        <span class="glyphicon glyphicon-home"></span>
                        <span class="hidden-sm">Home</span>
                    </a>
                </li>
                <!-- jhipster-needle-add-element-to-menu - JHipster will add new menu items here -->
                <li ng-class="{active: vm.$state.includes('entity')}" ng-switch-when="true" uib-dropdown class="dropdown pointer">
                    <a class="dropdown-toggle" uib-dropdown-toggle href="" id="entity-menu">
                        <span>
                            <span class="glyphicon glyphicon-th-list"></span>
                            <span class="hidden-sm">
                                Entities
                            </span>
                            <b class="caret"></b>
                        </span>
                    </a>
                    <ul class="dropdown-menu" uib-dropdown-menu>
                        <li ui-sref-active="active" >
                            <a ui-sref="opinion" ng-click="vm.collapseNavbar()">
                                <span class="glyphicon glyphicon-asterisk"></span>&nbsp;
                                <span >Opinion</span>
                            </a>
                        </li>
                        <!-- jhipster-needle-add-entity-to-menu - JHipster will add entities to the menu here -->
                    </ul>
                </li>
                <li ng-class="{active: vm.$state.includes('account')}" uib-dropdown class="dropdown pointer">
                    <a class="dropdown-toggle" uib-dropdown-toggle href="" id="account-menu">
                        <span>
                            <span class="glyphicon glyphicon-user"></span>
                            <span class="hidden-sm">
                                Account
                            </span>
                            <b class="caret"></b>
                        </span>
                    </a>
                    <ul class="dropdown-menu" uib-dropdown-menu>
                        <li ui-sref-active="active" ng-switch-when="true">
                            <a ui-sref="settings" ng-click="vm.collapseNavbar()">
                                <span class="glyphicon glyphicon-wrench"></span>&nbsp;
                                <span>Settings</span>
                            </a>
                        </li>
                        <li ui-sref-active="active" ng-switch-when="true">
                            <a ui-sref="password" ng-click="vm.collapseNavbar()">
                                <span class="glyphicon glyphicon-lock"></span>
                                <span>Password</span>
                            </a>
                        </li>
                        <li ui-sref-active="active" ng-switch-when="true">
                            <a ui-sref="sessions" ng-click="vm.collapseNavbar()">
                                <span class="glyphicon glyphicon-cloud"></span>&nbsp;
                                <span>Sessions</span>
                            </a>
                        </li>
                        <li ui-sref-active="active" ng-switch-when="true">
                            <a href="" ng-click="vm.logout()" id="logout">
                                <span class="glyphicon glyphicon-log-out"></span>&nbsp;
                                <span>Sign out</span>
                            </a>
                        </li>
                        <li ui-sref-active="active" ng-switch-when="false">
                            <a href="" ng-click="vm.login()" id="login">
                                <span class="glyphicon glyphicon-log-in"></span>&nbsp;
                                <span>Sign in</span>
                            </a>
                        </li>
                        <li ui-sref-active="active" ng-switch-when="false">
                            <a ui-sref="register" ng-click="vm.collapseNavbar()">
                                <span class="glyphicon glyphicon-plus-sign"></span>&nbsp;
                                <span>Register</span>
                            </a>
                        </li>
                    </ul>
                </li>
                <li ng-class="{active: vm.$state.includes('admin')}"  ng-switch-when="true" has-authority="ROLE_ADMIN" uib-dropdown class="dropdown pointer">
                    <a class="dropdown-toggle" uib-dropdown-toggle href="" id="admin-menu">
                        <span>
                            <span class="glyphicon glyphicon-tower"></span>
                            <span class="hidden-sm">Administration</span>
                            <b class="caret"></b>
                        </span>
                    </a>
                    <ul class="dropdown-menu" uib-dropdown-menu>
                        <li ui-sref-active="active">
                            <a ui-sref="user-management" ng-click="vm.collapseNavbar()">
                                <span class="glyphicon glyphicon-user"></span>&nbsp;
                                <span>User management</span>
                            </a>
                        </li>
                        <li ui-sref-active="active">
                            <a ui-sref="jhi-tracker" ng-click="vm.collapseNavbar()">
                                <span class="glyphicon glyphicon-eye-open"></span>&nbsp;
                                <span>User tracker</span>
                            </a>
                        </li>
                        <li ui-sref-active="active">
                            <a ui-sref="jhi-metrics" ng-click="vm.collapseNavbar()">
                                <span class="glyphicon glyphicon-dashboard"></span>&nbsp;
                                <span>Metrics</span>
                            </a>
                        </li>
                        <li ui-sref-active="active">
                            <a ui-sref="jhi-health" ng-click="vm.collapseNavbar()">
                                <span class="glyphicon glyphicon-heart"></span>&nbsp;
                                <span>Health</span>
                            </a>
                        </li>
                        <li ui-sref-active="active">
                            <a ui-sref="jhi-configuration" ng-click="vm.collapseNavbar()">
                                <span class="glyphicon glyphicon-list-alt"></span>&nbsp;
                                <span>Configuration</span>
                            </a>
                        </li>
                        <li ui-sref-active="active">
                            <a ui-sref="audits" ng-click="vm.collapseNavbar()">
                                <span class="glyphicon glyphicon-bell"></span>&nbsp;
                                <span>Audits</span>
                            </a>
                        </li>
                        <li ui-sref-active="active">
                            <a ui-sref="logs" ng-click="vm.collapseNavbar()">
                                <span class="glyphicon glyphicon-tasks"></span>&nbsp;
                                <span>Logs</span>
                            </a>
                        </li>
                        <li ng-hide="vm.inProduction" ui-sref-active="active">
                            <a ui-sref="docs" ng-click="vm.collapseNavbar()">
                                <span class="glyphicon glyphicon-book"></span>&nbsp;
                                <span>API</span>
                            </a>
                        </li>
                        <!-- jhipster-needle-add-element-to-admin-menu - JHipster will add entities to the admin menu here -->
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>
